<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit|ie-comp|ie-stand">

  <title>{% block page_title %}

    {{translate('The ONE 智能钢琴教室')}}

    {% endblock %}
  </title>
  <meta name="description" content="{% block meta_description %}{% endblock %}">
  <meta name="author" content="{% block meta_author %}{% endblock %}">

  <!-- Mobile viewport optimized: h5bp.com/viewport -->
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <script>
    (function(){
      var langPosi = window.location.search.indexOf('lang=');
      if(langPosi=='-1'){
        if(localStorage.lang == undefined){
          return;
        }else if(localStorage.lang == 'lang=en'){
          window.location.search.length > 0 ? window.location.href+='&'+localStorage.lang:window.location.href+='?'+localStorage.lang;
        }else{
          return;
        }
      }else{
        if(localStorage.lang == undefined){
          localStorage.lang = window.location.search.substr(langPosi,7);
        }else{
          localStorage.lang == window.location.search.substr(langPosi,7)? '' : localStorage.lang = window.location.search.substr(langPosi,7);
        }
      }
    })();
  </script>

  <link href="{{ url_for('static', filename='icons/favicon.ico') }}" type="image/x-icon" rel=icon>
  <link rel="stylesheet" href="{{ url_for('static', filename='libs/font-awesome4/css/font-awesome.min.css') }}">

  <!-- css_all for common css -->
  {% assets "css_all" %}
    <link rel="stylesheet" href="{{ ASSET_URL }}">
  {% endassets %}

  <!-- for project special css -->
  {% block css_assets %}
  {% endblock %}

  <!-- for custom css in page -->
  {% block css %}{% endblock %}

</head>
<body class="{% block body_class %}{% endblock %}">
{% block body %}

<header>{% block header %}{% endblock %}</header>

{% with form=form  %}

{% block nav %}

{% endblock %}

{% endwith %}

<div class="{% block content_class %}container{% endblock content_class %}">

  <div role="main" class="main-space">
    {% with messages = get_flashed_messages(with_categories=true) %}
    {% if messages %}
    <div class="row">
        {% for category, message in messages %}
        <div class="alert alert-{{ category }}">
          <a class="close" title="Close" href="#" data-dismiss="alert">&times;</a>
         {{message}}
        </div><!-- end .alert -->
        {% endfor %}
    </div><!-- end row -->
        {% endif %}
    {% endwith %}

    {% block content %}{% endblock %}
  </div>
</div><!-- end container -->



<!-- JavaScript at the bottom for fast page loading -->
{% assets "js_all" %}
    <script type="text/javascript" src="{{ ASSET_URL }}"></script>
{% endassets %}

<!-- for project special js -->
{% block js_assets %}
{% endblock %}

<!-- for custom js in page -->
{% block js %}{% endblock %}
<!-- end scripts -->
{% block js_bottom %}{% endblock %}
{% endblock %}
</body>
</html>

